<template>
	<view class="order_detail">
	
		<p style="font-size: 36upx;color: #F23A3A;margin-left: 30upx;padding-top: 20upx;" v-if="orderData.order && orderData.order.refund == 0">{{ type[orderData.order.status+1] }}</p>
		<p style="font-size: 36upx;color: #F23A3A;margin-left: 30upx;padding-top: 20upx;" v-else>{{ orderData.order.refund|refundstatus }}</p>
		<view class="pop_box" v-if="orderData.team_list && orderData.team_list.length !== 0">
			<p class="p4">
				还差
				<text :style="{ color: newColor.color }">{{orderData.team_num_less}}人</text>
				拼成
			</p>
			<p class="p5">
				<text>剩余:</text>
				<van-count-down millisecond use-slot :time="times" format="HH:mm:ss:SSS" @change="onChange" class="countdown">
					 <text class="item"  :style="{backgroundColor: newColor.color}">{{ timeData.hours }}</text>: 
					  <text class="item"  :style="{backgroundColor: newColor.color}">{{ timeData.minutes }}</text>: 
					  <text class="item"  :style="{backgroundColor: newColor.color}">{{ timeData.seconds }}</text>: 
					  <text class="item"  :style="{backgroundColor: newColor.color}">{{ timeData.milliseconds }}</text>
				</van-count-down>
			</p>
			<view class="people">
				<p class="have_data" v-for="(item,index) in orderData.team_list" :key="index">
					<image :src="item.head_img" mode="" :style="{ borderColor: newColor.color }"></image>
					<text>{{item.username}}</text>
				</p>
				<p class="not_data" v-for="item in orderData.team_num_less" :key="item"><image src="" mode=""></image></p>
			</view>
		</view>
		<!-- <view class="dianpu_list"> -->
			<!-- <image :src="orderData.goods_point.head_img" mode=""></image>
			<view class="right_box">
				<p class="p1">
					<text class="text0">{{ orderData.goods_point.shop_name }}</text>
				</p>
				<p class="p3">
					<image src="/static/img/home/morenweizhi.png" mode=""></image>
					<text class="text1">{{ orderData.goods_point.address }}</text>
				</p>
			</view> -->
			<!-- <p class="p4">
				<text class="text1">服务点</text>
				<image :src="orderData.leader.head_img" mode=""></image>
				<text class="text2">{{orderData.leader.user_name}}</text>
			</p>
			<p class="moren" :style="{ background: newColor.color }">服务点</p> -->
		<!-- </view> -->
		<view class="list_s" v-for="(item, index) in orderData.goods" :key="index">
			<image :src="item.img" mode=""></image>
			<view class="goods_right">
				<p class="p1">{{ item.title }}</p>
				<p class="p2">
					<text class="text1">规格:{{ item.option_title||'暂无规格' }}</text>
				</p>
				<p class="p2">
					<text class="text1">¥{{ item.price }} x {{ item.num }}</text>
				</p>
				<p class="p3">
					<text class="text2">小计：</text>
					<text class="text1" :style="{ color: newColor.color }">¥{{ item.total_price }}</text>
				</p>
			</view>
		</view>
		<p class="youhui">
			<text class="text1">收货人</text>
			<text class="text2">{{ orderData.order.recipients }}</text>
		</p>
		<p class="youhui">
			<text class="text1">收货电话</text>
			<text class="text2">{{ orderData.order.phone }}</text>
		</p>
		
		<p class="youhui">
			<text class="text1">收货地址</text>
			<text class="text2">{{ orderData.order.address }}</text>
		</p>
		
		
		
		
		
		<p class="youhui">
			<text class="text1">优惠券</text>
			<text class="text2">-¥{{ orderData.order.coupon_money }}</text>
		</p>
		<p class="youhui">
			<text class="text1">实付款</text>
			<text class="text2" :style="{ color: newColor.color }">¥{{ orderData.order.total_price }}</text>
		</p>
		<p class="youhui">
			<text class="text1">订单编号</text>
			<text class="text2">{{ orderData.order.order_no }}</text>
		</p>
		<p class="youhui">
			<text class="text1">订单创建时间</text>
			<text class="text2">{{ orderData.order.create_time | setTime }}</text>
		</p>
		<p class="youhui">
			<text class="text1">备注</text>
			<text class="text2">{{orderData.order.remark || '无'}}</text>
		</p>
		<view class="bottom_price">
			<block v-if="orderData.order.status == 0">
				<text class="submit" v-if="orderData.order.status == 0" @tap="onwxpay">立即支付</text>
			</block>
			<block v-if="orderData.order.status == 1">
				<text class="allprice" v-if="orderData.order.refund == 0 && orderData.team_list.length == 0" @tap="jumprefound">申请退款</text>
				<button class="allprice share" open-type="share"  v-if="orderData.order.refund == 0 && orderData.team_list.length !== 0" @tap="onshare">邀请好友</button>
				<text class="allprice" v-else-if="orderData.order.refund == 1" @tap="cencal(orderData.order)">撤销申请</text>
			</block>
			<block v-if="orderData.order.status == 2">
				<text class="allprice" v-if="orderData.order.refund == 0" @tap="jumprefound">申请退款</text>
				<text class="allprice" v-else-if="orderData.order.refund == 1" @tap="cencal(orderData.order)">撤销申请</text>
			</block>
			<block v-if="orderData.order.status == 3">
				<text class="allprice" v-if="orderData.order.refund == 0" @tap="jumprefound">申请退款</text>
				<text class="allprice" v-else-if="orderData.order.refund == 1" @tap="cencal(orderData.order)">撤销申请</text>
			</block>
			<block v-if="orderData.order.status == 4">
				<text class="allprice" v-if="orderData.order.refund == 0" @tap="jumprefound">申请售后</text>
				<text class="allprice" v-else-if="orderData.order.refund == 1">撤销申请</text>
			</block>
			<!-- <text class="allprice">撤销申请</text> -->
			<!-- <text class="allprice">删除订单</text> -->
		</view>
		<ourLoading isFullScreen :active="active" text="loading..." />
	</view>
</template>

<script>
import {wxpay} from '@/static/utils/pay.js'
import { getUserInfo } from '@/static/utils/ahth.js'
export default {
	data() {
		return {
			status: 0,
			active: true,
			orderid: '',
			orderData: {},
			timeData:{},
			times:'',
			userInfo:getUserInfo(),
			type: ['已取消', '待支付', '待配送', '待提货', '配送中', '已完成']
		};
	},
	filters: {
		refundstatus(value) {
			if (value) {
				if (value == -1) {
					return '退款已拒绝';
				} else if (value == 1) {
					return '退款审核中';
				} else if (value == 2) {
					return '退款成功';
				}
			}
		},
		setTime(value){
			if(value){
				let date = value* 1000
				let newdate = new Date(date)
				var y = newdate.getFullYear()
				var m = newdate.getMonth()+1
				var d = newdate.getDate()
				var h = newdate.getHours()
				var ms = newdate.getMinutes()
				var s = newdate.getSeconds()
				var times = y+'-'+m+'-'+d+' '+h+':'+ms+':'+s
				return times
			}
		}
	},
	onHide() {
		console.log('页面隐藏了');
		this.pause()
	},
	onUnload() {
		console.log('页面离开了');
		this.pause()
	},
	onShow() {
		this.status = this.$Route.query.status;
		this.orderid = this.$Route.query.orderid;
		this.getOrderData();
		setTimeout(() => {
			this.active = false;
		}, 600);
	},
	methods: {
		onChange(e) {
		  e.detail.milliseconds = (e.detail.milliseconds / 10).toFixed(0)
		  this.timeData = e.detail
		},
		pause() {
		   const countDown = this.selectComponent('.countdown');
		   countDown.pause();
		},
		setTimes(data){//计算时间
			// 判断当前是否在拼团开启时间内
			if(!data){
				return
			}
			let end = new Date(Number(data)*1000)
			let now = new Date()
			let time = {}
			let newtime = end
			// 获取剩余天数
			// time.day = Math.floor(newtime / 1000 / 60 / 60 / 24);
			// var daysRound = Math.floor(time.day);
			// time.hours =  Math.floor(newtime / 1000 / 60 / 60 - (24 * daysRound));
			// var hoursRound = Math.floor(time.hours);
			// time.minutes =  Math.floor(newtime / 1000 / 60 - (24 * 60 * daysRound) - (60 * hoursRound));
			// var minutesRound = Math.floor(time.minutes);
			// time.seconds =  Math.floor(newtime / 1000 - (24 * 60 * 60 * daysRound) - (60 * 60 * hoursRound) - (60 * minutesRound));
			// return time
			this.times = newtime
		},
		getOrderData() {
			this.request('order/orderDetail', {
				order_id: this.orderid
			}).then(res => {
				console.log(res,7);
				this.orderData = res.data;
				this.times = Number(res.data.team_end_time) * 1000
			});
		},
		onwxpay() {
			//微信支付
			uni.showLoading({
				title:'支付中...'
			})
			setTimeout(()=>{
				this.request('order/pay', {
					order_id: this.orderid
				}).then(res => {
					console.log(res);
					let data = res.data.data;
					// #ifdef MP-WEIXIN
					uni.hideLoading();
					wxpay(data, this.orderid);
					// #endif
				});
			},500)
		},
		jumprefound(){//申请退款
			this.$Router.push({path:'/pagesA/pages/order/refund',query:{
				orderid: this.orderid,
				status: 0
			}})
		},
		
		jumpstatus(){//申请售后
			this.$Router.push({path:'/pagesA/pages/order/refund',query:{
				orderid: this.orderid,
				status:1
			}})
		},
		cencal(row) {
			//取消退款
			uni.showModal({
				title: '取消订单',
				content: '确定取消退款申请？',
				success: res => {
					if (res.confirm) {
						this.request('order/cancelRefund', {
							order_id: row.id
						}).then(res => {
							console.log(res);
							if(res.code == 200){
								uni.showToast({
									title:'取消退款成功!'
								})
								setTimeout(()=>{
									this.$Router.push({path:'/pages/user/order_list/order_list'})
								},1500)
							}
						});
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},
		onShareAppMessage: function(ret) {
			//**** 在这里配置弹出的分享框的内容
			let uid = this.userInfo.user_id || '';
			let goodId = this.orderData.goods[0].goods_id
			let img =  this.orderData.goods[0].img[0]
			let teamId = this.orderData.order.team_id
			let title = this.orderData.goods[0].title
			return {
				title: title, // 设置弹出框的标题
				path: `/pagesA/pages/goods/onjoin?pid=${uid}&goodid=${goodId}&teamId=${teamId}`, //设置弹出框分享出去的链接地址
				imageUrl: img, //设置弹出框分享出去的图片
				success: function(res) {
					console.log(res);
				}
			};
		},
	}
};
</script>

<style lang="scss" scoped>
.order_detail {
	overflow: hidden;
	margin-bottom: 150upx;
	// background-color: #F2F2F2;
}
.pop_box {
	width: 600rpx;
	// min-height: 340upx;
	background: rgba(255, 255, 255, 1);
	border-radius: 10upx;
	margin: 0 auto;
	border-bottom: 1upx solid #f2f2f2;
	.view1 {
		overflow: hidden;
		position: relative;
		.p2 {
			width: 40%;
			margin-top: 20upx;
			float: left;
			image {
				width: 50upx;
				height: 50upx;
				border-radius: 50%;
				float: left;
				margin-top: 3upx;
			}
			text {
				font-size: 24upx;
				font-family: Droid Sans Fallback;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				margin-left: 20upx;
			}
		}
		.p3 {
			width: 60%;
			margin-top: 20upx;
			float: right;
			.text1 {
				font-size: 24upx;
				color: #333;
				display: block;
			}
			.text2 {
				float: left;
				font-size: 22upx;
				color: #999999;
				line-height: 60upx;
			}
		}
		.goto {
			width: 100upx;
			height: 46upx;
			background: rgba(242, 58, 58, 1);
			border-radius: 23upx;
			font-size: 22upx;
			color: #ffffff;
			text-align: center;
			line-height: 46upx;
			position: absolute;
			right: 0;
			bottom: 20upx;
		}
	}
	.p4 {
		text-align: center;
		font-size: 28upx;
	}
	.p5 {
		overflow: hidden;
		> text {
			float: left;
			margin: 0 auto;
			color: #999;
			font-size: 22upx;
			line-height: 60upx;
			margin-left: 22%;
		}
	}
	.people {
		overflow: hidden;
		display: flex;
		width: 600upx;
		justify-content: center;
		// justify-content: space-between;
		flex-wrap: wrap;
		margin-top: 10upx;
		p {
			flex: 1;
			overflow: hidden;
			max-width: 20%;
			min-width: 20%;
			text-align: center;
			margin-bottom: 10upx;
			image {
				width: 50upx;
				height: 50upx;
				border: 2upx dashed rgba(242, 58, 58, 1);
				border-radius: 50%;
				display: block;
				margin: 0 auto;
			}
			text {
				font-size: 24upx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				display: inline-block;
				width: 120upx;
			}
		}
	}
}
.dianpu_list {
	// min-height: 180upx;
	background: rgba(255, 255, 255, 1);
	box-shadow: 0px 0px 21px 0px rgba(255, 74, 44, 0.1);
	border-radius: 15upx;
	box-sizing: border-box;
	padding: 20upx 10upx;
	margin: 0 20upx;
	position: relative;
	margin-top: 40upx;
	> image {
		width: 80upx;
		height: 80upx;
		float: left;
		border-radius: 50%;
		margin-top: 20upx;
	}
	.right_box {
		float: right;
		text-align: left;
		margin-left: 20upx;
		width: 85%;
		overflow: hidden;
		image {
			width: 30upx;
			height: 26upx;
			float: left;
			margin-top: 5upx;
		}
		.p1 {
			// width: 100%;
			text-align: left;
			margin-bottom: 10upx;
			.text0 {
				font-size: 28upx;
				color: #333333;
			}
			.text2 {
				float: right;
				font-size: 24upx;
				color: #999999;
			}
		}
		.p2 {
			text-align: left;
			font-size: 24upx;
			color: #999999;
		}
		.p3 {
			overflow: hidden;
		}
		.text1 {
			font-size: 24upx;
			width: 80%;
			float: left;
			margin-left: 10upx;
			color: #999999;
		}
	}
	.p4 {
		padding-top: 30upx;
		width: 80%;
		overflow: hidden;
		line-height: 50upx;
		.text1 {
			float: left;
			font-size: 28upx;
			font-family: Droid Sans Fallback;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
		}
		image {
			width: 50upx;
			height: 50upx;
			border-radius: 50%;
			float: left;
			margin-left: 20upx;
			margin-right: 10upx;
		}
		.text2 {
			font-size: 24upx;
			font-family: Droid Sans Fallback;
			font-weight: 400;
			color: rgba(153, 153, 153, 1);
			float: left;
		}
	}
	.moren {
		position: absolute;
		width: 140upx;
		height: 36upx;
		background: rgba(242, 58, 58, 1);
		border-radius: 6upx;
		color: #ffffff;
		font-size: 22upx;
		top: -15upx;
		text-align: center;
		line-height: 36upx;
	}
	.xuanze {
		width: 100upx;
		height: 46upx;
		line-height: 46upx;
		background: rgba(242, 58, 58, 1);
		border-radius: 23upx;
		position: absolute;
		bottom: 20upx;
		right: 20upx;
		font-size: 22upx;
		font-family: Droid Sans Fallback;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		text-align: center;
	}
}
.list_s {
	box-sizing: border-box;
	background-color: #ffffff;
	overflow: hidden;
	height: 256rpx;
	margin: 0 20upx;
	margin-top: 20upx;
	margin-bottom: 20upx;
	box-shadow: 0px 0px 21upx 0px rgba(255, 74, 44, 0.1);
	padding: 28upx;
	border-radius: 10upx;

	image {
		width: 200upx;
		height: 200upx;
		float: left;
		border-radius: 15upx;
		margin-right: 20upx;
	}
	.goods_right {
		position: relative;
		overflow: hidden;
	}
	.p1 {
		font-size: 32upx;
		color: #000000;
		overflow: hidden;
		height: 80upx;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.p2 {
		font-size: 24upx;
		height: 26upx;
		line-height: 26upx;
		margin-top: 10upx;
		color: #333333;
		margin-bottom: 10upx;
		.text1 {
			color: #646464;
		}
		.text2 {
			color: #f23a3a;
		}
	}
	.p3 {
		.text1 {
			font-size: 36upx;
			color: #f23a3a;
			margin-right: 20upx;
		}
		.text2 {
			font-size: 28upx;
			font-family: Droid Sans Fallback;
			font-weight: 400;
			color: rgba(100, 100, 100, 1);
		}
	}
	.goumai {
		font-size: 24upx;
		width: 150upx;
		height: 56upx;
		line-height: 56upx;
		text-align: center;
		background: rgba(242, 58, 58, 1);
		border-radius: 28upx;
		color: #ffffff;
		position: absolute;
		right: 0upx;
		bottom: 0upx;
	}
}
.youhui {
	height: 40upx;
	line-height: 40upx;
	padding: 20upx 30upx;
	border-bottom: 1upx solid #f2f2f2;
	box-sizing: content-box;
	.text1 {
		font-size: 24upx;
		color: #333333;
	}
	.text2 {
		float: right;
		color: #999999;
		font-size: 24upx;
		margin-right: 5upx;
		margin-top: 2upx;
	}
	image {
		float: right;
		width: 12upx;
		height: 22upx;
		margin-top: 12upx;
	}
}
.bottom_price {
	height: 98upx;
	line-height: 98upx;
	
	background: rgba(255, 255, 255, 1);
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	.allprice {
		width: 230upx;
		height: 60upx;
		background: rgba(255, 255, 255, 1);
		border: 2upx solid rgba(170, 170, 170, 1);
		border-radius: 38upx;
		font-size: 32upx;
		font-family: Droid Sans Fallback;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		text-align: center;
		line-height: 60upx;
		float: right;
		margin-top: 10upx;
		margin-right: 32upx;
	}
	.submit {
		float: right;
		width: 230upx;
		height: 60upx;
		line-height: 60upx;
		border: 2upx solid rgba(242, 58, 58, 1);
		border-radius: 38upx;
		font-size: 32upx;
		font-family: Droid Sans Fallback;
		font-weight: 400;
		color: rgba(242, 58, 58, 1);
		text-align: center;
		margin-right: 32upx;
		margin-top: 10upx;
	}
}
.item {
  display: inline-block;
  width: 22px;
  margin: 0 10upx;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: #1989fa;
  border-radius: 2px;
  margin-top: 10upx;
}
/deep/.van-count-down{
		transform: translateY(5upx);
	}
	.share{
		margin: 0;
		min-width: 120upx;
		height: 50upx;
		padding: 0 20upx;
		border-radius: 50upx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28upx;
		margin-left: 20upx;
		background-color: #FFFFFF;
		color: #F23A3A;
		border-color: #F23A3A;
		&:active{
			background-color: #FFFFFF;
		}
	}
</style>
